<template>
  <section>
    <div class="info-box">
      <div><span>集群ID: </span>ffsdfasdfewrwerwe</div>
      <div><span>客户ID: </span>ffsdfasdfewrwerwe</div>
      <div><span>客户名称: </span>ffsdfasdfewrwerwe</div>
    </div>
    <div class="menu">
      <div v-for="item in menu_list" :key="item.name" class="menu-item" :class="{'is-active': (default_menu == item.name)}" @click="FnChangeMenu(item.name)">{{ item.label }}</div>
    </div>
    <router-view></router-view>
  </section>
</template>

<script>
export default {
  data() {
    return {
      default_menu: "cluster_overview",
      menu_list: [
        {name: "cluster_overview", label: "应用及组件运行情况"},
        {name: "cluster_ros", label: "ROS信息"},
        {name: "cluster_efk", label: "集群日志"}
      ]
    }
  },
  methods: {
    FnChangeMenu(name) {
      this.default_menu = name
      this.$router.push({name: name})
    }
  }
}
</script>

<style lang="scss" scoped>
.info-box {
  display: flex;
  height: 36px;
  line-height: 36px;
  padding-left: 4px;
  margin-bottom: 10px;
  &>div {
    width: 300px;
    font-size: 14px;
    span {
      margin-right: 6px;
    }
  }
}
.menu {
  display: flex;
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #e2e3e9;
  .menu-item {
    width: calc(100%/3);
    font-size: 14px;
    text-align: center;
    border-right: 1px solid #e2e3e9;
    cursor: pointer;
    &:last-child {
      border-right: 0;
    }
    &:hover {
      border-bottom: 2px solid #455cc6;
    }
  }
  .is-active {
    background: #455cc6;
    color: #fff;
  }
}
</style>